<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Thread Pool 「动态线程池」</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f7f7f7;
        }
        .container {
            max-width: 100%;
            margin: auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .loader {
            display: none;
            text-align: center;
        }
        .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5); /* 更深的背景遮罩 */
    padding-top: 100px;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* 添加阴影效果 */
    border-radius: 10px; /* 圆角边框 */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal input[readonly] {
    background-color: #e9e9e9;
}

/* 调整表单元素的样式 */
.modal input[type="text"],
.modal input[type="number"] {
    width: calc(100% - 10px); /* 让输入框宽度适应容器 */
    padding: 8px;
    margin-bottom: 15px; /* 增加间距 */
    border: 1px solid #ccc;
    border-radius: 4px; /* 圆角输入框 */
}

/* 为按钮添加样式 */
button {
    background-color: #4CAF50; /* 绿色背景 */
    color: white;
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    border-radius: 4px; /* 圆角按钮 */
    cursor: pointer;
}

button:hover {
    background-color: #45a049; /* 深绿色背景 */
}

/* 调整标签和输入框的对齐 */
label {
    display: block;
    margin-bottom: 5px;
    color: #333;
}

/* 调整标题样式 */
.modal-content h2 {
    color: #333;
    margin-bottom: 20px;
}
    </style>
</head>
<body>
<div class="container">
    <h1>Dynamic Thread Pool —— 动态线程池</h1>
    <div class="loader">Loading...</div>
    <button id="autoRefreshBtn">自动刷新</button>
    <button id="stopAutoRefreshBtn" style="display:none;">停止刷新</button>
    <table id="threadPoolList">
        <thead>
        <tr>
            <th>应用名称</th>
            <th>线程池名称</th>
            <th>核心线程池数</th>
            <th>最大线程数</th>
            <th>当前活跃线程数</th>
            <th>当前池中线程数</th>
            <th>队列类型</th>
            <th>当前队列任务数</th>
            <th>队列剩余容量数</th>
        </tr>
        </thead>
        <tbody>
        <!-- Data will be inserted here -->
        </tbody>
    </table>
</div>

<!-- 模态框（Modal） -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Thread Pool Configuration</h2>
        <form id="configForm">
            <label for="appName">应用名称:</label><br>
            <input type="text" id="appName" name="appName" readonly><br>
            <label for="threadPoolName">线程池名称:</label><br>
            <input type="text" id="threadPoolName" name="threadPoolName" readonly><br>
            <label for="corePoolSize">核心线程池数:</label><br>
            <input type="number" id="corePoolSize" name="corePoolSize"><br>
            <label for="maximumPoolSize">最大线程数:</label><br>
            <input type="number" id="maximumPoolSize" name="maximumPoolSize"><br>
            <button type="button" onclick="updateConfig()">确认修改</button>
        </form>
    </div>
</div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            var loader = document.querySelector('.loader');
            var tbody = document.querySelector('#threadPoolList tbody');

            var autoRefreshInterval;
            var autoRefreshBtn = document.getElementById('autoRefreshBtn');
            var stopAutoRefreshBtn = document.getElementById('stopAutoRefreshBtn');

            autoRefreshBtn.addEventListener('click', function() {
                // 开始自动刷新
                if (!autoRefreshInterval) {
                    autoRefreshInterval = setInterval(fetchThreadPoolList, 3000);
                    autoRefreshBtn.style.display = 'none';
                    stopAutoRefreshBtn.style.display = 'inline';
                }
            });

            stopAutoRefreshBtn.addEventListener('click', function() {
                // 停止自动刷新
                if (autoRefreshInterval) {
                    clearInterval(autoRefreshInterval);
                    autoRefreshInterval = null;
                    autoRefreshBtn.style.display = 'inline';
                    stopAutoRefreshBtn.style.display = 'none';
                }
            });

            function fetchThreadPoolList() {
                loader.style.display = 'block';
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://localhost:8089/api/v1/dynamic/thread/pool/query_thread_pool_list', true);
                xhr.onload = function() {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        var response = JSON.parse(xhr.responseText);
                        if (response.code === "0000" && Array.isArray(response.data)) {
                            var html = '';
                            response.data.forEach(function(item) {
                                html += '<tr>';
                                html += '<td>' + item.appName + '</td>';
                                html += '<td>' + item.threadPoolName + '</td>';
                                html += '<td>' + item.corePoolSize + '</td>';
                                html += '<td>' + item.maximumPoolSize + '</td>';
                                html += '<td>' + item.activeCount + '</td>';
                                html += '<td>' + item.poolSize + '</td>';
                                html += '<td>' + item.queueType + '</td>';
                                html += '<td>' + item.queueSize + '</td>';
                                html += '<td>' + item.remainingCapacity + '</td>';
                                html += '<td><button onclick="openModal(\'' + item.appName + '\', \'' + item.threadPoolName + '\')">修改</button></td>';
                html += '</tr>';
                            });
                            tbody.innerHTML = html;
                        } else {
                            console.error('The request was successful but the data format is incorrect!');
                        }
                    } else {
                        console.error('The request failed!');
                    }
                    loader.style.display = 'none';
                };
                xhr.onerror = function() {
                    console.error('The request failed!');
                    loader.style.display = 'none';
                };
                xhr.send();
            }

            fetchThreadPoolList();
        });

        // 获取模态框元素
        var modal = document.getElementById("myModal");
        var span = document.getElementsByClassName("close")[0];

        // 点击 <span> (x), 关闭模态框
        span.onclick = function() {
            modal.style.display = "none";
        }

        // 点击模态框外的区域, 关闭模态框
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

         // 打开模态框并填充数据
        function openModal(appName, threadPoolName) {
            // 发起请求获取线程池配置
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'http://localhost:8089/api/v1/dynamic/thread/pool/query_thread_pool_config?appName=' + appName + '&threadPoolName=' + threadPoolName, true);
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.code === "0000" && response.data) {
                        // 填充模态框表单
                        document.getElementById('appName').value = response.data.appName;
                        document.getElementById('threadPoolName').value = response.data.threadPoolName;
                        document.getElementById('corePoolSize').value = response.data.corePoolSize;
                        document.getElementById('maximumPoolSize').value = response.data.maximumPoolSize;
                        // ... (填充其他只读字段) ...
                        modal.style.display = "block";
                    } else {
                        console.error('The request was successful but the data format is incorrect!');
                    }
                } else {
                    console.error('The request failed!');
                }
            };
            xhr.onerror = function() {
                console.error('The request failed!');
            };
            xhr.send();
        }

        // 更新配置
        function updateConfig() {
            var appName = document.getElementById('appName').value;
            var threadPoolName = document.getElementById('threadPoolName').value;
            var corePoolSize = document.getElementById('corePoolSize').value;
            var maximumPoolSize = document.getElementById('maximumPoolSize').value;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8089/api/v1/dynamic/thread/pool/update_thread_pool_config', true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.code === "0000") {
                        alert('Configuration updated successfully!');
                        modal.style.display = "none";
                        fetchThreadPoolList(); // 重新加载线程池列表
                    } else {
                        alert('Failed to update configuration: ' + response.info);
                    }
                } else {
                    alert('Failed to update configuration!');
                }
            };
            xhr.onerror = function() {
                alert('Failed to update configuration!');
            };
            xhr.send(JSON.stringify({
                appName: appName,
                threadPoolName: threadPoolName,
                corePoolSize: parseInt(corePoolSize, 10),
                maximumPoolSize: parseInt(maximumPoolSize, 10)
            }));
        }

</script>
</body>
</html>
